<template>
  <BaseChart 
    :option="chartOption" 
    :loading="loading"
    :width="width"
    :height="height"
    @chart-click="handleClick"
    @chart-ready="handleReady"
  />
</template>

<script setup>
import { computed } from 'vue'
import BaseChart from './BaseChart.vue'

// Props定义
const props = defineProps({
  data: {
    type: Array,
    required: true
  },
  xAxisData: {
    type: Array,
    required: true
  },
  title: {
    type: String,
    default: ''
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '300px'
  },
  loading: {
    type: Boolean,
    default: false
  },
  smooth: {
    type: Boolean,
    default: true
  },
  showArea: {
    type: Boolean,
    default: false
  },
  colors: {
    type: Array,
    default: () => ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399']
  }
})

// Emits定义
const emit = defineEmits(['chart-click', 'chart-ready'])

// 计算属性 - 图表配置
const chartOption = computed(() => {
  const series = (props.data || []).map((item, index) => ({
    name: item?.name || '未知',
    type: 'line',
    data: item?.data || [],
    smooth: props.smooth,
    symbol: 'circle',
    symbolSize: 6,
    lineStyle: {
      width: 3,
      color: props.colors[index % props.colors.length]
    },
    itemStyle: {
      color: props.colors[index % props.colors.length]
    },
    areaStyle: props.showArea ? {
      opacity: 0.3,
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
          offset: 0,
          color: props.colors[index % props.colors.length]
        }, {
          offset: 1,
          color: 'rgba(255, 255, 255, 0)'
        }]
      }
    } : null
  }))

  return {
    title: {
      text: props.title,
      left: 'left',
      textStyle: {
        fontSize: 16,
        fontWeight: 'normal',
        color: '#333'
      }
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(255, 255, 255, 0.95)',
      borderColor: '#e4e7ed',
      borderWidth: 1,
      textStyle: {
        color: '#333'
      },
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    legend: {
      data: (props.data || []).map(item => item?.name || '未知'),
      top: 30,
      textStyle: {
        color: '#666'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: props.xAxisData,
      axisLine: {
        lineStyle: {
          color: '#e4e7ed'
        }
      },
      axisLabel: {
        color: '#666'
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#666'
      },
      splitLine: {
        lineStyle: {
          color: '#f0f0f0',
          type: 'dashed'
        }
      }
    },
    series
  }
})

// 事件处理
const handleClick = (params) => {
  emit('chart-click', params)
}

const handleReady = (instance) => {
  emit('chart-ready', instance)
}
</script>
